<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button onclick="doAjax()">$.ajax(...)</button>
        <button onclick="doAjaxGet()">$.get(...)</button>
        <button onclick="">$.getJson(...)</button>
        <button onclick="doAjaxPost()">$.post(...)</button>
        <button onclick="doAjaxLoad()">$("selecor").load(...)</button>
    </div>
    <div id="result"></div>
    <script src="js/jquery.min.js"></script>
    <script>
        function doAjaxLoad(){
            let url = "http://localhost/doGet"
            $("#result").load(url,function () {
                console.log("load complete")
            });
        }


        function doAjaxPost(){
            //1.url
            let url="http://localhost/doPost";
            //2.params
            //let params="id=1&name=xiaomi&letter=x";
            let params={
                "id":"1",
                "name":"xiaomi",
                "letter":"x"
            };
            //3.send ajax post request
            //方法2
            $.ajax({
                type:"post",
                url:url,
                data:JSON.stringify(params),
                contentType:"application/json;charset=utf-8",
                success:function(result) {//readyState==4&&status==200
                    $("#result").html(result);//innerHTML
                },
                error:function(xhr){//readyState==4&&status!=200
                    $("#result").html("request fail");
                    console.log(xhr);//XmlHttpRequest
                }
            });

            //方法1
            // $.post(url,params,function(result){//success
            //     console.log(result);
            // });
        }

        function doAjaxGet(){
            //1.url
            let url="http://localhost/doGet";
            //2.params
            let params="";
            //3.send ajax get request
            $.get(url,params,function(result){//success
                console.log(result);//json格式的对象
            },"json");
        }
        function doAjax(){
            //debugger
            //1.请求url
            let url="http://localhost/doAjax";
            //2.请求参数
            let params="msg=hello jquery ajax";
            //3.发送异步ajax请求
            //$.ajax函数为jquery中的一个ajax函数
            $.ajax({
                type:"GET",
                url:url,
                data:params,
                dataType:"text",
                async:true,
                success:function(result) {//readyState==4&&status==200
                    $("#result").html(result);//innerHTML
                },
                error:function(xhr){//readyState==4&&status!=200
                    $("#result").html("request fail");
                    console.log(xhr);//XmlHttpRequest
                }//服务端没有处理的异常假如抛给了客户端则会执行error部分内容
            });
        }
    </script>
</body>
</html>